import path from 'path';
import { ConfigEnv, defineConfig, UserConfig } from 'vite';
// vite.config.ts中无法使用import.meta.env 所以需要引入
import vue from '@vitejs/plugin-vue';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
// 增加 vue文件 script name值
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
// 生产gz文件
import viteCompression from 'vite-plugin-compression';
// 按需加载
import AutoImport from 'unplugin-auto-import/vite';

// undraw-ui按需导入
import { UndrawUiResolver } from 'undraw-ui/es/resolvers';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

// https://vitejs.dev/config/
export default defineConfig(
  ({ mode }: ConfigEnv): UserConfig => ({
    base: process.env.VITE_BASE_URL || (mode === 'production' ? '/user/' : '/'),
    plugins: [
      vue(),
      vueSetupExtend(),
      AutoImport({
        // 自动导入 Vue 和 Vue-router 相关函数，如 ref, reactive, createRouter 等
        imports: [
          'vue',
          '@vueuse/core',
          '@vueuse/core',
          'vue-router',
          'pinia'
        ],
        dts: 'src/auto-import.d.ts', // 生成在src路径下名为auto-import.d.ts的声明文件
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(), IconsResolver({ prefix: 'Icon' })
          // 自动导入图标组件
        ]
        //   eslintrc: { enabled: true },
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          IconsResolver({ enabledCollections: ['ep'] }),
          UndrawUiResolver
        ]
      }),
      Icons({ autoInstall: true }),
      // * 使用 svg 图标
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      }),
      // gzip压缩 生产环境生成 .gz 文件
      mode === 'production' &&
        viteCompression({
          verbose: true,
          disable: false,
          threshold: 10240,
          algorithm: 'gzip',
          ext: '.gz'
        })
    ],
    css: { preprocessorOptions: { scss: { additionalData: '@use "./src/styles/index.scss" as *;' } } },
    // 配置别名
    resolve: {
      alias: {
        '@': resolve('src'),
        static: resolve('public/static')
      },
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: [
        '.mjs',
        '.js',
        '.ts',
        '.jsx',
        '.tsx',
        '.json',
        '.vue'
      ]
    },
    // 启动服务配置
    server: {
      // 服务器主机名，如果允许外部访问，可设置为 "0.0.0.0" 也可设置成你的ip地址
      host: '0.0.0.0',
      port: 8900,
      open: true,
      https: false, // 改回HTTP
      cors: true,
      // 允许通过Nginx反向代理访问 - 仅开发环境
      ...(mode === 'development' ? {
        allowedHosts: ['www.monkeyk.space', 'localhost', '127.0.0.1']
      } : {
        allowedHosts: ['www.monkeyk.space']
      }),
      // 代理跨域（模拟示例）
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:8989', // easymock
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
        // 代理 WebSocket
        '/ws': {
          target: 'http://127.0.0.1:8989',
          ws: true, // 关键！开启 ws 代理
          changeOrigin: true
          // rewrite: (path) => path.replace(/^\/ws/, '/ws'), // 通常不需要改
        }
      }
    },
    // 生产环境打包配置
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
    }
  })
);
